<template>
  <div class="flex-x-center">
    <el-card class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83">
      <h3 class="mt-6 font-500 text-primary text-18px" type="primary">登录</h3>
      <el-form ref="loginFormRef" :model="loginForm" :rules="formRules" class="mt-6" size="large">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder='请输入用户名' />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            show-password
            placeholder='请输入密码'
          />
        </el-form-item>
        <el-form-item>
            <!-- <el-checkbox>记住密码</el-checkbox> -->
            <el-button type="primary" link style="margin-left: auto;" @click="forgetPassword">忘记密码？</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full" type="primary" @click="submitLoginForm(loginFormRef)" :loading="false">登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full" @click="onAdd">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <!--用户注册弹框-->
  <AddOrUpdate ref="addOrUpdateRef" />
  <!--忘记密码弹框-->
  <ResetPassword ref="resetPasswordRef" />
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import AddOrUpdate from './user/AddUser.vue';
import ResetPassword from './ResetPassword.vue';
import { useUsersStore } from "../store/user";

const userStore = useUsersStore();
const addOrUpdateRef = ref();
const resetPasswordRef = ref();
const loginFormRef = ref<FormInstance>();

const loginForm = reactive({
  userName: 'admin',
  password: '123456'
});

const formRules: FormRules = {
  userName: { required: true, message: '请输入用户名', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' }
};

const submitLoginForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      userStore.login(loginForm);
    } else {
      console.log('error submit!')
    }
  })
};

const onAdd = () => {
  addOrUpdateRef.value.init();
};

const forgetPassword = () => {
  resetPasswordRef.value.init();
}
</script>

<style lang="scss" scoped>
.flex-x-center {
	display: flex;
	justify-content: center;
	align-items: center;
	// flex-grow: 1; // 铺满整个屏幕
	height: 97vh; // 为了让备案号在底部不出现滚动条设置的97
}
.login-container {
//   @apply relative wh-full flex-center dark:bg-#101628 bg-no-repeat bg-center-top;
  background-image: url('/src/assets/background.svg');
}
</style>